<template>
    <div class="page home-page">
        <div class="banner">
            <div
                    class="banner-image"
                    style="background-image: url('/images/home_banner.jpg')"
            ></div>
        </div>
        <div class="content">
            <div class="news">
                <div class="content-title news-left">
                    <div class="title">News & Events</div>
                    <div class="desc">新闻动态</div>
                    <div class="line"></div>
                    <!-- <router-link :to="item.url"></router-link> -->
                    <router-link to="/information">
                        <div class="button">
                            查看更多
                            <img src="/images/right_arrow.png"/>
                        </div>
                    </router-link>
                </div>
                <div class="news-con">
                    <div class="new-control">
                        <img src="images/arrow-top_hover.png" class="new-control-first"/>
                        <img src="images/arrow-bottom.png"/>
                    </div>
                    <div v-for="(item, index) in information.list" :key="index" class="news-item">
                        <div class="time">{{ item.createTime }}</div>
                        <div class="title">{{ item.title }}</div>
                        <div class="desc">
                            {{ item.content|filterbq }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="coach-training">
                <div class="coach-training-fixed" style="background-image:url(/images/home_1.jpg)">
                    <div class="title">教练进修</div>
                    <router-link to="/coachTraining" class="button">查看更多</router-link>
                </div>
                <div class="coach-training-con" style="background-image:url(/images/home_2.jpg)">
                    <div class="title">
                        <img src="/images/arrow_bottom_circle.png" alt=""/>
                        <div class="title-memo" @click="gozxzq">
                            <span>在线涨球</span>
                            <P>足球基础技巧（脚部对抗）</P>
                        </div>
                    </div>
                </div>
            </div>
            <div class="platform-advantage">
                <div class="content-title platform-advantage-title">
                    <div class="title">Platform advantage</div>
                    <div class="desc">平台优势</div>
                    <div class="line"></div>
                </div>
                <div class="platform-advantage-con">
                    <div class="platform-advantage-item" v-for="(item,index) in advantage" :key="index">
                        <img :src="item.img|filtersImg" alt=""/>
                        <div class="memo">
                            <span>{{item.title}}</span>
                            <P>{{item.content}}</P>
                        </div>
                    </div>

                </div>
            </div>

            <div class="platform-info">
                <div class="content-title platform-info-title">
                    <div class="title">平台简介</div>
                    <div class="desc">Platform introduction</div>
                    <div class="line"></div>
                </div>

                <div style="width: 100%;display: flex;justify-content: center; align-items: center;">
                    <video
                            style="width:700px;"
                            :src="infoVideo|filtersImg"
                            poster="/images/home_4.jpg"
                            controls>
                    </video>
                    <!-- <div class="play"><img src="/images/play_icon.png" /></div> -->
                </div>
            </div>

            <div class="cooperative-partner">
                <div class="content-title cooperative-partner-title">
                    <div class="title">Cooperative partner</div>
                    <div class="desc">合作伙伴</div>
                    <div class="line"></div>
                </div>
                <div class="cooperative-partner-con-title">
                    <img src="/images/trigle.png" alt=""/>
                    <span>合作机构/俱乐部</span>
                    Government units
                </div>
                <div class="cooperative-partner-con">
                    <div class="cooperative-partner-item" v-for="(item,index) in cooperation" :key="index">
                        <img :src="item|filtersImg" alt=""/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    // @ is an alias to /src
    import {bannerGetAll, informationGetList, getAdminInfo} from '../api/api/index.js';
    import {baseImgPath, basefile, imgupload} from '@/config/env.js';

    export default {
        name: 'home',
        data() {
            return {
                information: [],
                banner: [],
                homedata: {
                    "logo": "",
                    "banner": "",
                    "advantage": "",
                    "infoVideo": "",
                    "cooperation": "",
                    "publicName": "",
                    "publicImg": "",
                    "infoAddress": " ",
                    "infoPhone": "",
                    "infoMail": "",
                    "putOnFileOne": "",
                    "putOnFileTwo": ""
                },
                logo: '',
                banner: [],
                advantage: [],
                infoVideo: '',
                cooperation: [],
                infoAddress: "",
                infoPhone: "",
                infoMail: "",
                putOnFileOne: "",
                putOnFileTwo: ""

            };
        },
        created() {
            bannerGetAll().then(res => {
                this.banner = res;
            });
            informationGetList({
                pageNum: 0,
                pageSize: 4
            }).then(res => {
                this.information = res.data;
                //console.log(res.data);
            });

            // 首页配置
            getAdminInfo().then(res => {
                this.homedata = res.data;
                this.banner = JSON.parse(res.data.banner)
                this.advantage = JSON.parse(res.data.advantage)
                this.infoVideo = res.data.infoVideo
                this.infoAddress = res.data.infoAddress
                this.infoPhone = res.data.infoPhone
                this.infoMail = res.data.infoMail
                this.putOnFileOne = res.data.putOnFileOne
                this.putOnFileTwo = res.data.putOnFileTwo
                this.cooperation = JSON.parse(res.data.cooperation)


            });
        },
        methods:{
            // 进入在线涨球页面
            gozxzq(){
                this.$router.push({
                    path: '/parent/onlingInflation',
                })
            },
        },
        filters: {

            filtersImg: function (img) {
                return basefile + img
            },
            filterbq: function (str) {
                str = str.replace(/<[^>]+>|&[^>]+;/g, "").trim();//去掉所有的html标签和&nbsp;之类的特殊符合
                return str;
            }
        },
    };
</script>
<style scoped>
    @import url("web/css/index.css");
</style>
